<template>
  <div class="tabbar">
    <span :style="{color:currentIndex==index?'blue':'black'}" @click="handleClick(index)" v-for="(item,index) in arr" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
    data(){
        return{
            currentIndex:'',
            arr:['首页','爆爆团','订单','我的']
        }
    },
    methods:{
        handleClick(index){
            this.currentIndex = index;
        }
    }
}
</script>

<style lang="scss" scoped>
    .tabbar{
        display: flex;
        width: 100%;
        height:60px;
        position: fixed;
        bottom:0;
        border-top: 1px solid black;
        text-align: center;
        line-height: 60px;
        font-size: 20px;
        background: rgb(255, 254, 254);
    }
    .tabbar span{
        flex: 1;
    }
</style>